<template>
  <div>
    <h1>app</h1>
    <ul class="nav-list">
      <!-- router-link本质是a链接  -->
      <li>
        <router-link to="/homepage">主页</router-link>
      </li>
      <li>
        <!-- to可以通过v-bind绑定 转变为动态 -->
        <router-link :to="{ name: 'catepage' }">分类</router-link>
      </li>
      <li>
        <router-link :to="{ path: '/cartpage' }">购物车</router-link>
      </li>
      <li>
        <router-link to="/personalpage">个人中心</router-link>
      </li>
    </ul>
    <!-- 
      keep-alive 缓存路由组件
      默认情况下，路由切换的过程是销毁与重建的过程
      可以缓存路由组件对象，提高用户体验
      激活与失活
      对数据要求实时性比较高时，不要使用，低的时候可以使用，用户体验比较好
     -->
    <!-- <keep-alive max="2"> -->
    <!-- 需求：HomePage和CatePage 进行缓存  其他组件不缓存 -->
    <!--  <keep-alive include="HomePage,CatePage"> -->
    <!-- <keep-alive :include="['HomePage', 'CatePage']"> -->
    <!--  <keep-alive :include="/HomePage|CatePage/"> -->
    <keep-alive exclude="HomePage,CatePage">
      <router-view></router-view>
    </keep-alive>
    <!-- 
      keep-alive的属性
      max:最大可以缓存多个组件
      include: 路由组件缓存时包含其中组件名字
      exclude:路由组件缓存时不包含其中组件名字

     -->
  </div>
</template>

<script>
/*  */
export default {};
</script>

<style lang="scss" scoped>
.nav-list {
  display: flex;
  justify-content: space-around;
  li {
    /* a {
      color: green;
      text-decoration: none;
      &:active {
        color: red;
      }
    } */
    // 可以通过其自带的类名操作样式
    .router-link-active {
      color: pink;
    }
  }
}
</style>